<template>
  <div class="custom-component">
    <div v-if="!props.code" class="empty-comp">
      <SvgIcon iconName="icon-info-fill"></SvgIcon>
			<span style="margin-left: 16px;">请选择全局组件</span>
    </div>
    <component
      v-else
      :is="props.code"
      :modelValue="value"
      v-bind="customProps"
      v-on="events"
    ></component>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  interface IProps {
    code: string
    props?: any,
    modelValue?: any
  }

  const props = defineProps<IProps>()
  const emit = defineEmits(['update:modelValue'])

  const value = computed(() => props.modelValue || (customProps as any).modelValue)
  const customProps = computed(() => {
    if (props.props) {
      if (typeof props.props === 'string') {
        try {
          return JSON.parse(props.props)
        } catch (error) {
          console.log(error)
        }
      } else {
        return props.props
      }
    }
    return {}
  })

  const events = {
    input: (val: any) => {
      emit('update:modelValue', val)
    }
  }

</script>

<style lang="less" scoped>
  .empty-comp {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    color: #4d72dd;
    font-size: 18px;
  }
</style>